<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->

		<!--提示下拉框start-->
		<script type='text/javascript' src='../../libs/js/form/selectSuggestion.js'></script>
		<!--提示下拉框end-->
	</head>

	<body>

		<div  class="page_content">

			<div class="groupTitle"><span>组件说明</span></div>

			提示下拉框点击右侧箭头按钮展开下拉列表，点击文本框可以进行输入过滤。<br/> 默认有输入验证功能，即输入的文本在列表里面不存在时，会自动清除。此功能可禁用，这时可以输入任意文本。
			<br/> 相比单选下拉框组件，除了有输入提示功能外，还有选项标签式分组，数据列表分页，键盘操作进行翻页和选中等额外功能（键盘操作在点击文本框展开列表时有效，点击按钮时无效）。缺少联动，动态修改选项功能。
			<br/>

			<div class="height_15"></div>

			<div class="groupTitle"><span>1、通过url获取数据源</span></div>

			<div class="red">此示例由后台支持</div>
			<!--
      <div class="selectSuggestion" url="../../autoComplateAction.do?method=getListOfCity" id="sug-1"></div>
       <input type="button" value="获取值" onclick="getValue()" />
     <br/>还可通过url+参数获取数据源，用法同单选下拉框
	 -->

			<div class="height_15"></div>

			<div class="groupTitle"><span>2、通过设置data数据获取数据源</span></div>

			<div class="selectSuggestion" id="suggestion2" keepDefaultStyle="true"></div>

			<div class="height_15"></div>
			<br />
			<div class="groupTitle"><span>3、点击文本框显示下拉列表</span></div>

			<div class="selectSuggestion" id="suggestion3" keepDefaultStyle="true" showList="true"></div>
			<br/> 设置showList属性为true，点击文本框也会出现下拉列表。
			<br/> 当点击文本框出现下拉列表时，可以使用键盘操作进行翻页和选中。

			<div class="height_15"></div>

			<div class="groupTitle"><span>4、不允许输入过滤</span></div>

			<div class="selectSuggestion" id="suggestion4" keepDefaultStyle="true" suggestable="false" prompt="请选择" autoCheck="false" pageNum="50" openDirection="bottom"></div>
			<br/> 此时等同于基本的单选下拉框，并且这里自定义下拉列表每页50条记录，不足50条不出现分页按钮。

			<div class="height_15"></div>

			<div class="groupTitle"><span>5、禁用/启用</span></div>

			<div class="selectSuggestion" disabled="true" id="suggestion5" keepDefaultStyle="true"></div>
			<br /><br />
			<input type="button" value="启用" onclick="enableSelect()" />
			<input type="button" value="禁用" onclick="disableSelect()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>6、选中事件</span></div>

			<div class="selectSuggestion" id="suggestion6" keepDefaultStyle="true"></div>

			<div class="height_15"></div>
			<br />
			<div class="groupTitle"><span>7、宽度、高度与方向</span></div>

			下拉框默认有一个宽度（每种风格皮肤下默认宽度可能不一样），当有较长的选项时，下拉框宽度默认不变，而选项容器宽度自适应<br/>
			<div class="selectSuggestion" id="suggestion7-1" keepDefaultStyle="true"></div>
			<br/>单独设置下拉框宽度，选项容器宽度默认不会小于下拉框宽度
			<br/>
			<div class="selectSuggestion" id="suggestion7-2" keepDefaultStyle="true" selWidth="260"></div>
			<br/>自定义容器高度：<br/>
			<div class="selectSuggestion" id="suggestion7-3" keepDefaultStyle="true" boxHeight="100"></div>
			<br/>强制向上展开：<br/>
			<div class="selectSuggestion" id="suggestion7-4" keepDefaultStyle="true" openDirection="top"></div>

			<div class="height_15"></div>
			<br />
			<div class="groupTitle"><span>8、自定义下拉列表数据</span></div>

			<div class="selectSuggestion" id="suggestion8" keepDefaultStyle="true"></div>
			<br/> 可以设置点击出现的下拉列表数据，例如当全部列表数据数据量很大时，点击下拉只显示推荐的数据。
			<br/> 当输入过滤时，再从全部的数据里面过滤。

			<div class="height_15"></div>

			<div class="groupTitle"><span>9、自定义列数</span></div>

			<div class="selectSuggestion" id="suggestion9" keepDefaultStyle="true" showMultiList="true" multiListWidth="300"></div>
			<br/> 设置showMultiList属性为true后，点击下拉的选项列表为多列。需要设置列表总宽度。
			<br/> 多列下拉列表无分页功能，并且需要设置列表的尺寸

			<div class="height_15"></div>

			<div class="groupTitle"><span>10、选项标签式分组</span></div>

			<div class="selectSuggestion" id="suggestion10" keepDefaultStyle="true" showMultiList="true" multiListWidth="300" multiListHeight="200"></div>
			<br/> 可以为组件多列下拉列表设置一个分组的数据，实现下拉列表的分组。

			<div class="height_15"></div>

			<div class="groupTitle"><span>11、将下拉列表渲染为图片+文字</span></div>

			<div class="selectSuggestion" id="suggestion11" renderMode="pic" boxWidth="330" keepDefaultStyle="true" itemHeight="90" itemWidth="75" pageNum="9"></div>

			<div class="height_15"></div>
			<br />
			<div class="groupTitle"><span>12、设置初始值</span></div>

			<div class="selectSuggestion" id="suggestion12" keepDefaultStyle="true" selectedValue="4"></div>

			<div class="height_15"></div>
			<br />
			<div class="groupTitle"><span>13、取消自动验证</span></div>

			<div class="selectSuggestion" id="suggestion13" keepDefaultStyle="true" autoCheck="false"></div>
			<input type="button" value="获取值" onclick="getValue2()" />
			<br/> 这时可以输入下拉列表没有的文本。

			<div class="height_15"></div>

			<div class="groupTitle"><span>14、自定义验证</span></div>

			<div class="selectSuggestion" id="suggestion14" keepDefaultStyle="true" autoCheck="false"></div>
			<br/> 通过自定义验证，可以用ajax方式将输入的值提交到后台检验数据库中是否存在该文本，如果存在，将对应的value返回通知页面是选择的；如果不存在，通知页面是输入的，提交时可以为选项表添加记录。
			<br/>

			<div class="height_15"></div>

			<div class="groupTitle"><span>15、动态创建</span></div>

			<input type="button" value="点击生成" id="testBtn" onclick="dynamic()" />
			
			<div class="clear"></div>
			<div class="height_15"></div>

			<div class="groupTitle"><span>16、获得选中节点自定义属性</span></div>

			<div class="selectSuggestion" id="suggestion16" keepDefaultStyle="true"></div>

			<div class="height_15"></div>
			<br />
			<div class="groupTitle"><span>17、无前缀数据</span></div>

			<div class="selectSuggestion" id="suggestion17" keepDefaultStyle="true" showMultiList="true" multiListWidth="300" multiListHeight="200"></div>

			<div class="height_50"></div>
		</div>
		<script>
			var listdata = {
				"list": [{
					value: "1",
					key: "北京",
					suggest: "北京|beijing|bj"
				}, {
					value: "2",
					key: "广州",
					suggest: "广州|guangzhou|gz"
				}, {
					value: "3",
					key: "深圳",
					suggest: "深圳|shenzhen|sz"
				}, {
					value: "4",
					key: "上海",
					suggest: "上海|shanghai|sh"
				}, {
					value: "5",
					key: "长沙",
					suggest: "长沙|changsha|cs"
				}, {
					value: "6",
					key: "成都",
					suggest: "成都|chengdu|cd"
				}, {
					value: "7",
					key: "贵阳",
					suggest: "贵阳|guiyang|gy"
				}, {
					value: "8",
					key: "海口",
					suggest: "海口|haikou|hk"
				}, {
					value: "9",
					key: "杭州",
					suggest: "杭州|hangzhou|hz"
				}, {
					value: "10",
					key: "昆明",
					suggest: "昆明|kunming|km"
				}, {
					value: "11",
					key: "南昌",
					suggest: "南昌|nanchang|nc"
				}, {
					value: "12",
					key: "南京",
					suggest: "南京|nanjing|nj"
				}, {
					value: "13",
					key: "三亚",
					suggest: "三亚|sanya|sy"
				}, {
					value: "14",
					key: "沈阳",
					suggest: "沈阳|shenyang|sy"
				}, {
					value: "15",
					key: "温州",
					suggest: "温州|wenzhou|wz"
				}, {
					value: "16",
					key: "武汉",
					suggest: "武汉|wuhan|wh"
				}, {
					value: "17",
					key: "厦门",
					suggest: "厦门|xiamen|xm"
				}, {
					value: "18",
					key: "西安",
					suggest: "西安|xian|xa"
				}, {
					value: "19",
					key: "郑州",
					suggest: "郑州|zhenghou|zz"
				}, {
					value: "20",
					key: "汕头",
					suggest: "汕头|shantou|st"
				}, {
					value: "21",
					key: "太原",
					suggest: "太原|taiyuan|ty"
				}, {
					value: "22",
					key: "天津",
					suggest: "天津|tianjin|tj"
				}]
			};

			var hotdata = {
				"list": [{
					value: "1",
					key: "北京"
				}, {
					value: "2",
					key: "广州"
				}, {
					value: "3",
					key: "深圳"
				}, {
					value: "4",
					key: "上海"
				}]
			};

			var tabdata = {
				list: [{
					name: "热门城市",
					tab: [{
						key: "北京",
						value: "1"
					}, {
						key: "广州",
						value: "2"
					}, {
						key: "深圳",
						value: "3"
					}, {
						key: "上海",
						value: "4"
					}, {
						key: "成都",
						value: "6"
					}, {
						key: "杭州",
						value: "9"
					}, {
						key: "三亚",
						value: "13"
					}, {
						key: "天津",
						value: "22"
					}, {
						key: "厦门",
						value: "17"
					}, {
						key: "西安",
						value: "18"
					}]
				}, {
					name: "A-F",
					tab: [{
						key: "北京",
						value: "1"
					}, {
						key: "长沙",
						value: "5"
					}, {
						key: "成都",
						value: "6"
					}]
				}, {
					name: "G-J",
					tab: [{
						key: "广州",
						value: "2"
					}, {
						key: "贵阳",
						value: "7"
					}, {
						key: "海口",
						value: "8"
					}, {
						key: "杭州",
						value: "9"
					}]
				}, {
					name: "K-N",
					tab: [{
						key: "昆明",
						value: "10"
					}, {
						key: "南昌",
						value: "11"
					}, {
						key: "南京",
						value: "12"
					}]
				}, {
					name: "O-T",
					tab: [{
						key: "深圳",
						value: "3"
					}, {
						key: "上海",
						value: "4"
					}, {
						key: "三亚",
						value: "13"
					}, {
						key: "沈阳",
						value: "14"
					}, {
						key: "汕头",
						value: "20"
					}, {
						key: "太原",
						value: "21"
					}, {
						key: "天津",
						value: "22"
					}]
				}, {
					name: "U-Z",
					tab: [{
						key: "温州",
						value: "15"
					}, {
						key: "武汉",
						value: "16"
					}, {
						key: "厦门",
						value: "17"
					}, {
						key: "西安",
						value: "18"
					}, {
						key: "郑州",
						value: "19"
					}]
				}]
			}

			var listdata2 = [{
				value: "1",
				key: "北京",
				suggest: "北京|beijing|bj"
			}, {
				value: "2",
				key: "广州",
				suggest: "广州|guangzhou|gz"
			}, {
				value: "3",
				key: "深圳",
				suggest: "深圳|shenzhen|sz"
			}, {
				value: "4",
				key: "上海",
				suggest: "上海|shanghai|sh"
			}, {
				value: "5",
				key: "长沙",
				suggest: "长沙|changsha|cs"
			}, {
				value: "6",
				key: "成都",
				suggest: "成都|chengdu|cd"
			}, {
				value: "7",
				key: "贵阳",
				suggest: "贵阳|guiyang|gy"
			}, {
				value: "8",
				key: "海口",
				suggest: "海口|haikou|hk"
			}, {
				value: "9",
				key: "杭州",
				suggest: "杭州|hangzhou|hz"
			}, {
				value: "10",
				key: "昆明",
				suggest: "昆明|kunming|km"
			}, {
				value: "11",
				key: "南昌",
				suggest: "南昌|nanchang|nc"
			}, {
				value: "12",
				key: "南京",
				suggest: "南京|nanjing|nj"
			}, {
				value: "13",
				key: "三亚",
				suggest: "三亚|sanya|sy"
			}, {
				value: "14",
				key: "沈阳",
				suggest: "沈阳|shenyang|sy"
			}, {
				value: "15",
				key: "温州",
				suggest: "温州|wenzhou|wz"
			}, {
				value: "16",
				key: "武汉",
				suggest: "武汉|wuhan|wh"
			}, {
				value: "17",
				key: "厦门",
				suggest: "厦门|xiamen|xm"
			}, {
				value: "18",
				key: "西安",
				suggest: "西安|xian|xa"
			}, {
				value: "19",
				key: "郑州",
				suggest: "郑州|zhenghou|zz"
			}, {
				value: "20",
				key: "汕头",
				suggest: "汕头|shantou|st"
			}, {
				value: "21",
				key: "太原",
				suggest: "太原|taiyuan|ty"
			}, {
				value: "22",
				key: "天津",
				suggest: "天津|tianjin|tj"
			}];

			var tabdata2 = [{
				name: "热门城市",
				tab: [{
					key: "北京",
					value: "1"
				}, {
					key: "广州",
					value: "2"
				}, {
					key: "深圳",
					value: "3"
				}, {
					key: "上海",
					value: "4"
				}, {
					key: "成都",
					value: "6"
				}, {
					key: "杭州",
					value: "9"
				}, {
					key: "三亚",
					value: "13"
				}, {
					key: "天津",
					value: "22"
				}, {
					key: "厦门",
					value: "17"
				}, {
					key: "西安",
					value: "18"
				}]
			}, {
				name: "A-F",
				tab: [{
					key: "北京",
					value: "1"
				}, {
					key: "长沙",
					value: "5"
				}, {
					key: "成都",
					value: "6"
				}]
			}, {
				name: "G-J",
				tab: [{
					key: "广州",
					value: "2"
				}, {
					key: "贵阳",
					value: "7"
				}, {
					key: "海口",
					value: "8"
				}, {
					key: "杭州",
					value: "9"
				}]
			}, {
				name: "K-N",
				tab: [{
					key: "昆明",
					value: "10"
				}, {
					key: "南昌",
					value: "11"
				}, {
					key: "南京",
					value: "12"
				}]
			}, {
				name: "O-T",
				tab: [{
					key: "深圳",
					value: "3"
				}, {
					key: "上海",
					value: "4"
				}, {
					key: "三亚",
					value: "13"
				}, {
					key: "沈阳",
					value: "14"
				}, {
					key: "汕头",
					value: "20"
				}, {
					key: "太原",
					value: "21"
				}, {
					key: "天津",
					value: "22"
				}]
			}, {
				name: "U-Z",
				tab: [{
					key: "温州",
					value: "15"
				}, {
					key: "武汉",
					value: "16"
				}, {
					key: "厦门",
					value: "17"
				}, {
					key: "西安",
					value: "18"
				}, {
					key: "郑州",
					value: "19"
				}]
			}]

			var listdata3 = {
				"list": [{
					value: "1",
					key: "北京市海淀区北四环西路9号银谷大厦8层",
					suggest: "北京|beijing|bj"
				}, {
					value: "2",
					key: "广州市西路9号银谷大厦8层",
					suggest: "广州|guangzhou|gz"
				}, {
					value: "3",
					key: "深圳市西路9号银谷大厦8层",
					suggest: "深圳|shenzhen|sz"
				}, {
					value: "4",
					key: "上海市西路9号银谷大厦8层",
					suggest: "上海|shanghai|sh"
				}, {
					value: "5",
					key: "长沙市西路9号银谷大厦8层",
					suggest: "长沙|changsha|cs"
				}]
			};

			var listdata4 = {
				"list": [{
					value: "1",
					key: "北京",
					suggest: "北京|beijing|bj",
					custom: "北京自定义属性"
				}, {
					value: "2",
					key: "广州",
					suggest: "广州|guangzhou|gz",
					custom: "广州自定义属性"
				}, {
					value: "3",
					key: "深圳",
					suggest: "深圳|shenzhen|sz",
					custom: "深圳自定义属性"
				}]
			};

			var listdata5 = {
				"list": [{
					value: "1",
					key: "youtube",
					suggest: "youtube",
					img: "../../libs/icons/icon_flat/youtube.png"
				}, {
					value: "2",
					key: "yahoo",
					suggest: "yahoo",
					img: "../../libs/icons/icon_flat/yahoo.png"
				}, {
					value: "3",
					key: "xbox",
					suggest: "xbox",
					img: "../../libs/icons/icon_flat/xbox.png"
				}, {
					value: "4",
					key: "wordpress",
					suggest: "wordpress",
					img: "../../libs/icons/icon_flat/wordpress.png"
				}, {
					value: "5",
					key: "windows",
					suggest: "windows",
					img: "../../libs/icons/icon_flat/windows.png"
				}, {
					value: "6",
					key: "wikipedia",
					suggest: "wikipedia",
					img: "../../libs/icons/icon_flat/wikipedia.png"
				}, {
					value: "7",
					key: "vimeo",
					suggest: "vimeo",
					img: "../../libs/icons/icon_flat/vimeo.png"
				}, {
					value: "8",
					key: "upload",
					suggest: "upload",
					img: "../../libs/icons/icon_flat/upload.png"
				}, {
					value: "9",
					key: "unlock",
					suggest: "unlock",
					img: "../../libs/icons/icon_flat/unlock.png"
				}, {
					value: "10",
					key: "twitter",
					suggest: "twitter",
					img: "../../libs/icons/icon_flat/twitter.png"
				}, {
					value: "11",
					key: "tumblr",
					suggest: "tumblr",
					img: "../../libs/icons/icon_flat/tumblr.png"
				}, {
					value: "12",
					key: "trash",
					suggest: "trash",
					img: "../../libs/icons/icon_flat/trash.png"
				}, {
					value: "13",
					key: "technorati",
					suggest: "technorati",
					img: "../../libs/icons/icon_flat/technorati.png"
				}, {
					value: "14",
					key: "stumbleupon",
					suggest: "stumbleupon",
					img: "../../libs/icons/icon_flat/stumbleupon.png"
				}, {
					value: "15",
					key: "skype",
					suggest: "skype",
					img: "../../libs/icons/icon_flat/skype.png"
				}, {
					value: "16",
					key: "setting",
					suggest: "setting",
					img: "../../libs/icons/icon_flat/setting.png"
				}, {
					value: "17",
					key: "search",
					suggest: "search",
					img: "../../libs/icons/icon_flat/search.png"
				}, {
					value: "18",
					key: "screen",
					suggest: "screen",
					img: "../../libs/icons/icon_flat/screen.png"
				}, {
					value: "19",
					key: "rss",
					suggest: "rss",
					img: "../../libs/icons/icon_flat/rss.png"
				}, {
					value: "20",
					key: "removelocation",
					suggest: "removelocation",
					img: "../../libs/icons/icon_flat/removelocation.png"
				}, {
					value: "reddit",
					key: "太原",
					suggest: "reddit",
					img: "../../libs/icons/icon_flat/reddit.png"
				}, {
					value: "22",
					key: "pinterest",
					suggest: "pinterest",
					img: "../../libs/icons/icon_flat/pinterest.png"
				}, {
					value: "23",
					key: "picasa",
					suggest: "picasa",
					img: "../../libs/icons/icon_flat/picasa.png"
				}, {
					value: "24",
					key: "pencil",
					suggest: "pencil",
					img: "../../libs/icons/icon_flat/pencil.png"
				}]
			};

			function initComplete() {
				$("#suggestion2").data("data", listdata);
				$("#suggestion2").render();

				$("#suggestion3").data("data", listdata);
				$("#suggestion3").render();

				$("#suggestion4").data("data", listdata);
				$("#suggestion4").render();

				$("#suggestion5").data("data", listdata);
				$("#suggestion5").render();

				$("#suggestion6").data("data", listdata);
				$("#suggestion6").render();
				$("#suggestion6").bind("listSelect", function(e, obj) {
					top.Toast("showNoticeToast", "选中项文本：" + obj.relText + "；选中项值：" + obj.relValue);
				})

				$("#suggestion7-1").data("data", listdata3);
				$("#suggestion7-1").render();

				$("#suggestion7-2").data("data", listdata3);
				$("#suggestion7-2").render();

				$("#suggestion7-3").data("data", listdata);
				$("#suggestion7-3").render();

				$("#suggestion7-4").data("data", listdata);
				$("#suggestion7-4").render();

				$("#suggestion8").data("data", listdata);
				$("#suggestion8").data("list", hotdata);
				$("#suggestion8").render();

				$("#suggestion9").data("data", listdata);
				$("#suggestion9").render();

				$("#suggestion10").data("data", listdata);
				$("#suggestion10").data("tab", tabdata);
				$("#suggestion10").render();

				$("#suggestion11").data("data", listdata5);
				$("#suggestion11").selectSuggestionRender();

				$("#suggestion12").data("data", listdata);
				$("#suggestion12").render();

				$("#suggestion13").data("data", listdata);
				$("#suggestion13").render();

				$("#suggestion14").data("data", listdata);
				$("#suggestion14").render();
				$("#suggestion14").bind("validate", function(e, value) {
					top.Toast("showNoticeToast", "此处触发验证事件，可以用ajax方式将”" + value + "“提交到后台处理。")
				})

				$("#suggestion16").data("data", listdata4);
				$("#suggestion16").render();
				$("#suggestion16").bind("listSelect", function(e, obj) {
					var node = $("#suggestion16").data("selectedNode");
					top.Toast("showNoticeToast", node.custom);
				})

				$("#suggestion17").data("data", listdata2);
				$("#suggestion17").data("tab", tabdata2);
				$("#suggestion17").render();

			}

			function getValue() {
				top.Toast("showNoticeToast", "选中文本：" + $("#sug-1").attr("relText") + "；选中值：" + $("#sug-1").attr("relValue"));
			}

			function getValue2() {
				top.Toast("showNoticeToast", "输入文本：" + $("#suggestion13").attr("relText"));
			}
			//设为不可用
			function disableSelect() {
				$("#suggestion5").attr("disabled", true);
				$("#suggestion5").render();
			}
			//设为可用
			function enableSelect() {
				$("#suggestion5").attr("disabled", false);
				$("#suggestion5").render();
			}

			//动态生成
			function dynamic() {
				var $sugg = $('<div type="text" class="selectSuggestion"></div>');
				$sugg.data("data", listdata);
				$("#testBtn").after($sugg);
				$("#testBtn").after($("<br/>"));
				//渲染
				$sugg.render();
			}
		</script>
	</body>

</html>